div {
    width: 200px;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: chartreuse;
}

div.corner {
    border-radius: 10px;
    border: 2px solid silver;
    box-shadow: 10px 10px 5px silver;
    background-color: #52ffe1;
    width: 200px;
    /*height: 40px;*/
    opacity: 0.7;
    text-align: center;
    padding: 0px;
}

p.shadow {
    text-shadow: 4px 4px 2px red;
    word-wrap: break-word;
}

div.transform_rotate {
    width: 200px;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: chartreuse;
    transform: rotate(9deg);
}
div.transform_translate {
    width: 200px;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: chartreuse;
    transform: translate(20px, 30px);
}
div.transform_scale {
    width: 200px;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: chartreuse;
    transform: scale(2, 1);
}
div.transform_skew {
    width: 200px;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: chartreuse;
    transform: skew(20deg, 30deg);
}
div.transform_matrix {
    width: 200px;
    margin-top: 60px;
    padding: 8px 20px;
    background-color: #ab3fff;
    transform: matrix(1, 0, 0, 2, 0, 10);
}

div.transition_width  {
    margin-top: 40px;
    width: 100px;
    height: 40px;
    background-color: #5bccde;
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
}

div.transition_width:hover {
    width: 300px;
}

div.transition_height {
    margin-top: 40px;
    width: 100px;
    height: 40px;
    background-color: #5bccde;
    transition: height 1s;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
}

div.transition_height:hover {
    height: 100px;
}

div.transition {
    margin-top: 40px;
    width: 100px;
    height: 40px;
    background-color: #5bccde;
    transition: width 1s ease, height 1s linear, transform 1s;
    -moz-transition: width 1s ease, height 1s linear, transform 1s;
    -webkit-transition: width 1s ease, height 1s linear, transform 1s;
}

div.transition:hover {
    width: 300px;
    height: 100px;
    background-color: #00FF00;
    /*transform: rotate(30deg);*/
}

@keyframes color {
    from {
        background-color: indianred;
    }
    to {
        background-color: yellow;
    }
}


div.animation {
    animation: color 3s;
    -moz-animation: color 3s;
    -webkit-animation: color 3s;
}

@-webkit-keyframes translate {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
    10% {
        background-color: yellow;
        left: 100px;
        top: 0px;
    }
    80% {
        background-color: green;
        left: 100px;
        top: 100px;
    }
    90% {
        background-color: blue;
        left: 0px;
        top: 100px;
    }
    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
}

div.animation2 {
    position: relative;
    width: 64px;
    height: 64px;
    background-color: red;
    animation: translate 5s;
    -moz-animation: translate 5s;
    -webkit-animation: translate 5s;
}